<template>
    <view class="square_components_chat_group">
        <z-paging ref="Zpaging" class="lis_div" v-model="list" @query="getList" :refresher-enabled="true" :fixed="false"
            :show-loading-more-no-more-view="false" :refresher-theme-style="'white'">
            <div class="search_div">
                <div class="search">
                    <input class="input" v-model="key" type="text" placeholder="请输入群号码或者群名称">
                    <div class="icon"></div>
                </div>
                <div class="btn" @click="toSearch">搜索</div>
            </div>
            <!-- <div class="banner_div" v-if="bannerList.length">
                <swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="5000"
                    v-cloak:indicator-dots="false">
                    <swiper-item v-for="(item, key) in bannerList" :key="key">
                        <view class="swiper_item" :style="{ backgroundImage: 'url(' + item + ')' }"></view>
                    </swiper-item>
                </swiper>
            </div> -->
            <scroll-view class="gtabs_div" scroll-x>
                <div class="tab" :class="li.id == chatCategoryId?'tab_active':''" v-for="(li,key) in chatCategoryList"
                    :key="key" @click="chatCategoryClick(li)">{{li.title }}</div>
            </scroll-view>
            <div class="lis_box">
                <div class="li" v-for="(li,key) in list" :key="key" @click="toAdd(li,key)">
                    <pub-image class="img" :src="li.groupAvatar"></pub-image>
                    <div class="name">{{ li.groupName }}</div>
                    <div class="txt">#{{ li.id }}</div>
                </div>
            </div>
        </z-paging>
    </view>
</template>

<script>
export default {
    data() {
        return {
            bannerList: [],
            chatCategoryList: [],
            chatCategoryId: '',
            key: '',
            list: [],
            isLoad: false,
        };
    },
    onLoad() {

    },
    mounted() { },
    methods: {
        getZpagingList(type, data) {
            switch (type) {
                case 'init':
                    if (!this.isLoad) {
                        this.isLoad = true;
                        this.getBanner();
                        this.getGroupCategory();
                    }
                    break;
                case 'reload':
                    this.$refs.Zpaging.reload();
                    break;
                default:
                    break;
            }
        },
        async getBanner() {
            const res = await this.$request.get('public/getAd', {
                key: 'group-ad'
            });
            // console.log(res);
            if (res.code == 200 && res.result.length > 0) {
                this.bannerList = res.result[0]?.image.split(",") || [];
            }
        },
        async getGroupCategory() {
            const res = await this.$request.get('chat/getGroupCategory', {});
            if (res.code == 200 && res.result.length > 0) {
                this.chatCategoryList = res.result;
                this.chatCategoryId = res.result[0].id
                this.$comFun.openLoading();
                this.$refs.Zpaging.reload();
            } else {
                this.$refs.Zpaging.complete([]);
            }
        },
        chatCategoryClick(info) {
            this.chatCategoryId = info.id;
            this.$refs.Zpaging.reload();
        },
        toSearch() {
            this.$refs.Zpaging.reload();
        },
        async getList(pageNo, pageSize) {
            let data = {
                pageNo: pageNo,
                pageSize: 30,
                categoryId: this.chatCategoryId,
                key: this.key,
            };
            const res = await this.$request.get('chat/getGroupPageByCategoryId', data);
            this.$comFun.closeLoading();
            // console.log(res);
            if (res.code == 200) {
                this.$refs.Zpaging.complete(res.result.records);
            } else {
                this.$refs.Zpaging.complete(false);
            }
        },
        async toAdd(info, key) {
            this.$emit("openAddGroupAlert", {
                info, key
            })
        },
    },
};
</script>

<style lang="scss" scoped>
@import "@/common/css/square.scss";
</style>
